<template>
  <view class="body">
    <img class="bg_img" src="@/static/jyfp/background.png" alt="" />
    <view :class="['top_info', mode == 'easy' ? 'mgb170' : mode == 'normal' ? 'mgb144' : 'mgb64']">
      <view class="top_items">
        倒计时
        <!-- <text v-if="proccess.time >= 60" class="top_font">{{
          Math.floor(proccess.time / 60)
        }}</text>
        <text v-if="proccess.time >= 60 && proccess.time % 60 != 0">分</text>
        <text v-if="proccess.time % 60 == 0">分钟</text>
        <text v-if="proccess.time % 60 != 0" class="top_font">{{ proccess.time % 60 }}</text>
        <text v-if="proccess.time % 60 != 0">秒</text> -->
        <text class="top_font">{{ minutes + ' : ' + seconds }}</text>
      </view>
      <view class="top_items">
        分数
        <text class="top_font">{{ proccess.score }}</text>
      </view>
    </view>
    <view v-if="!overlayShow" class="main">
      <view class="main_border">
        <view
          v-for="(item, index) of cards"
          :key="index"
          :class="['items', item.isTurn ? 'active' : '']"
        >
          <img
            @tap="turnCard(item)"
            v-if="!item.isTurn"
            class="item_back"
            src="@/static/jyfp/back.png"
            alt=""
          />
          <img v-else class="item_back" :src="item.value" alt="" />
        </view>
      </view>
    </view>
    <up-overlay :show="overlayShow">
      <view class="wrap">
        <view v-if="overlayType == 'begin'" @tap="begin" class="buttons begin">
          <img class="btn_img" src="@/static/jyfp/button.png" alt="" />
          <text class="content">开始游戏</text>
        </view>
        <view v-if="overlayType == 'modeChoose'" class="mode">
          <view class="mode_title">选择难度</view>
          <view @tap="modeSelect('easy')" class="mg64 buttons">
            <img class="btn_img" src="@/static/jyfp/button.png" alt="" />
            <text class="content">简单</text>
          </view>
          <view @tap="modeSelect('normal')" class="mg64 buttons">
            <img class="btn_img" src="@/static/jyfp/button.png" alt="" />
            <text class="content">普通</text>
          </view>
          <view @tap="modeSelect('difficult')" class="buttons">
            <img class="btn_img" src="@/static/jyfp/button.png" alt="" />
            <text class="content">困难</text>
          </view>
        </view>
        <view v-if="overlayType == 'finish'" class="finish">
          <view class="finish_title">完成训练！</view>
          <view class="final_score">
            <text class="num">{{ proccess.score }}</text>
            <text class="text">分</text>
          </view>
          <view @tap="again" class="mg56 buttons">
            <img class="btn_img" src="@/static/jyfp/button.png" alt="" />
            <text class="content">再次训练</text>
          </view>
          <view @tap="quit" class="buttons">
            <img class="btn_img" src="@/static/jyfp/button.png" alt="" />
            <text class="content">退出训练</text>
          </view>
        </view>
      </view>
    </up-overlay>
  </view>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { ref, reactive, computed } from 'vue'

const mode = ref('easy')
const isBegin = ref(false)
const disabled = ref(false)
const overlayShow = ref(true)
const overlayType = ref('modeChoose')

const combo = ref(false)
const proccess = reactive({
  score: 0,
  time: 300
})

const cards = ref([])
const choose = ref([])
const timer = ref()

const minutes = computed(() => {
  return proccess.time >= 60 ? '0' + Math.floor(proccess.time / 60) : '00'
})
const seconds = computed(() => {
  return proccess.time % 60 > 0
    ? proccess.time % 60 < 10
      ? '0' + (proccess.time % 60)
      : proccess.time % 60
    : '00'
})

const begin = () => {
  isBegin.value = true
  overlayShow.value = false
  proccess.score = 0
  proccess.time = 300
  shuffleArray(cards.value)
  cards.value.forEach((item) => {
    item.isTurn = true
  })
  clearInterval(timer.value)
  // 展示所有卡片三秒，三秒后翻转并开始倒计时
  setTimeout(() => {
    cards.value.forEach((val) => {
      val.isTurn = false
    })
    timer.value = setInterval(() => {
      proccess.time--
      if (proccess.time <= 0) {
        finish()
      }
    }, 1000)
  }, 3000)
}

const finish = () => {
  clearInterval(timer.value)
  isBegin.value = false
  overlayType.value = 'finish'
  overlayShow.value = true
}

const modeSelect = (item: any) => {
  mode.value = item
  overlayType.value = 'begin'
  cards.value = []
  if (item == 'easy') {
    for (let i = 0; i < 2; i++) {
      for (let j = 1; j <= 8; j++) {
        cards.value.push({
          id: i + '-' + j,
          value: j % 6 == 0 ? `/static/jyfp/pic6.png` : `/static/jyfp/pic${j % 6}.png`,
          isTurn: false
        })
      }
    }
  } else if (item == 'normal') {
    for (let i = 0; i < 2; i++) {
      for (let j = 1; j <= 10; j++) {
        cards.value.push({
          id: i + '-' + j,
          value: j % 6 == 0 ? `/static/jyfp/pic6.png` : `/static/jyfp/pic${j % 6}.png`,
          isTurn: false
        })
      }
    }
  } else {
    for (let i = 0; i < 2; i++) {
      for (let j = 1; j <= 12; j++) {
        cards.value.push({
          id: i + '-' + j,
          value: j % 6 == 0 ? `/static/jyfp/pic6.png` : `/static/jyfp/pic${j % 6}.png`,
          isTurn: false
        })
      }
    }
  }
}
const turnCard = (item: any) => {
  if (isBegin.value && !disabled.value) {
    // 游戏是否开始且可以点击
    item.isTurn = true
    disabled.value = true
    if (choose.value.length == 0) {
      choose.value.push(item)
      disabled.value = false
    } else {
      if (choose.value[0].value == item.value) {
        // 卡片结果相同得分,连续成功额外得分
        if (combo.value) {
          proccess.score += 15
        } else {
          proccess.score += 10
        }
        choose.value = []
        combo.value = true
        disabled.value = false
        // 判断游戏是否结束
        let isFinish = true
        cards.value.forEach((val) => {
          if (!val.isTurn) {
            isFinish = false
          }
        })
        if (isFinish) {
          finish()
        }
      } else {
        setTimeout(() => {
          // 关闭两张卡片
          item.isTurn = false
          const idx = cards.value.findIndex((val: any) => {
            return val.id == choose.value[0].id
          })
          cards.value[idx].isTurn = false
          choose.value = []
          combo.value = false
          disabled.value = false
        }, 1500)
      }
    }
  }
}

const shuffleArray = (arr) => {
  arr.sort(() => Math.random() - 0.5)
}

const again = () => {
  overlayType.value = 'modeChoose'
  overlayShow.value = true
}
const quit = () => {
  uni.reLaunch({
    url: '/pages/index/index'
  })
}
</script>
<style scoped lang="scss">
@keyframes rotates {
  0% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.9);
  }
}

.body {
  position: relative;
  box-sizing: border-box;
  height: 100vh;
  padding-top: 34rpx;

  .bg_img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
  }

  .top_info {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 654rpx;
    height: 94rpx;
    padding: 0 32rpx;
    margin: 0 auto;
    background: #ffd2dc;
    border: 2rpx solid #8b4455;
    border-radius: 140rpx;

    .top_items {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #551d42;
      // -webkit-text-stroke: 1rpx #fff;
      text-shadow:
        -1px 0 white,
        0 1px white,
        1px 0 white,
        0 -1px white;

      .top_font {
        margin: 0 16rpx;
        font-size: 48rpx;
        font-weight: bold;
      }
    }
  }

  .mgb170 {
    margin-bottom: 170rpx;
  }

  .mgb144 {
    margin-bottom: 144rpx;
  }

  .mgb64 {
    margin-bottom: 64rpx;
  }

  .main {
    padding: 16rpx;
    margin: 0 32rpx;
    background: #fff;
    border-radius: 28rpx;
    box-shadow: 12rpx 16rpx 0rpx 0rpx rgb(139 68 85 / 24%);

    .main_border {
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      gap: 4rpx;
      justify-content: space-between;
      background: #551d42;
      border: 16rpx solid #8b4455;
      border-radius: 28rpx;

      .items {
        width: 152rpx;
        height: 176rpx;
      }

      .item_back {
        width: 152rpx;
        height: 176rpx;
      }

      .active {
        animation: rotates 0.1s linear;
      }
    }
  }

  .wrap {
    position: relative;
    display: flex;
    justify-content: center;
    height: 100%;

    .buttons {
      position: relative;
      width: 518rpx;
      height: 152rpx;
      line-height: 132rpx;
      text-align: center;
      animation: rotate-two 1s infinite;

      .btn_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 518rpx;
        height: 152rpx;
      }

      .content {
        position: relative;
        z-index: 2;
        font-size: 48rpx;
        font-weight: 600;
        color: #fff;
        text-shadow: 0 2px 0 rgb(0 0 0 / 60%);
      }
    }

    .begin {
      margin-top: 768rpx;
    }

    .mode {
      margin-top: 282rpx;
      text-align: center;

      .mode_title {
        margin-bottom: 128rpx;
        font-size: 48rpx;
        font-weight: 500;
        color: #fff;
        text-shadow: 0 4px 0 rgb(0 0 0 / 60%);
      }

      .mg64 {
        margin-bottom: 64rpx;
      }
    }

    .finish {
      margin-top: 184rpx;
      text-align: center;

      .finish_title {
        margin-bottom: 56rpx;
        font-size: 48rpx;
        font-weight: 500;
        color: #fff;
        text-shadow: 0 4px 0 rgb(0 0 0 / 60%);
      }

      .final_score {
        margin-bottom: 172rpx;

        .num {
          font-size: 240rpx;
          font-weight: 500;
          color: #fff;
          text-shadow: 0 12px 0 rgb(0 0 0 / 60%);
        }

        .text {
          font-size: 48rpx;
          font-weight: 500;
          color: #fff;
          text-shadow: 0 8px 0 rgb(0 0 0 / 60%);
        }
      }

      .mg56 {
        margin-bottom: 56rpx;
      }
    }
  }
}
</style>
